<template>
    <div id="active">
        <mt-loadmore bottomLoadingText="" topDropText="Loading..." topLoadingText="" topPullText="" :top-method="loadTop"  :bottom-method="loadBottom"
                     :bottom-all-loaded="bottomAllLoaded" ref="loadmore" @bottom-status-change="handleBottomChange">

            <section class="campaign" v-for="article in articleList">
                <router-link v-bind:to="'/active/' + article.id">
                    <div class="pic"><img v-bind:src="article.cover"></div>
                    <span v-if="article.block_time== null"><img src="assets/css/time.png"></span>
                    <p v-if="article.block_time == null | article.block_time < nowtime">活动已过期</p>
                </router-link>
            </section>
            <div slot="bottom" class="mint-loadmore-bottom">
				<span v-show="bottomStatus!=='loading'&&!bottomAllLoaded">Loading...</span>
				<span v-show="bottomAllLoaded==true">没有更多内容</span>
			</div>
        </mt-loadmore>

    </div>
</template>

<script type="text/javascript">
    import {Loadmore} from 'mint-ui';

    export default {
        data () {
            return {
                articleList: [],
                article_page: {},
                nowtime: Date.parse(new Date()) / 1000,
                bottomAllLoaded: false
            }
        },
        mounted: function () {
            this.getArticles(0);
        },
        methods: {
            getArticles(page){
                this.$http.get(this.GLOBAL.serverAddr + '/actives' + '?page=' + page, {
                    headers: {
                        'Authorization': this.GLOBAL.authorization
                    },
                    emulateJSON: true
                }).then(function (response) {
                    this.article_page.cur_page = response.data.page.cur_page;
                    this.article_page.count_page = response.data.page.count_page;
                    this.article_page.page_size = response.data.page.page_size;

                    var list = response.data.data;
                    for (var i in list) {
                        this.articleList.push(list[i]);
                    }
                }, function (response) {
                    // 这里是处理错误的回调
                    console.log(response)
                });
            },
            loadBottom() {
                if (this.article_page.cur_page < this.article_page.count_page) {
                    this.getArticles(this.article_page.cur_page + 1);
                    
                } else {
                    //最后一页,解除加载触发事件
                    this.bottomAllLoaded = true;
                  
                    console.log("no more");

                }
                this.$refs.loadmore.onBottomLoaded();
            },
            loadTop() {
            	this.getArticles(0);
            	this.$refs.loadmore.onTopLoaded();
            },
            handleBottomChange(status){
        		this.bottomStatus = status;
        		console.log(this.bottomStatus);
        	}
        },
        components: {
            'mt-loadmore': Loadmore
        }
    }
</script>

<style>
</style>
